Serverless Meetup Japan で Cloudflare の画像最適化機能について話してきた #serverlessjp

ウィスキー、シガー、パイプをこよなく愛する大栗です。

Serverless Meetup Japan Virtual #26 で Cloudflare 特集回があり、画像最適化機能について話をしてきました。

Serverless Meetup Japan Virtual #26

本エントリでは、サンプル画像がCloudflare の各機能が出力する WebP や AVIF ではなく JPEG フォーマットで配信されています

Cloudflare の画像最適化機能を紹介してみる

タイトル通り Cloudflare の画像最適化の機能についてご紹介しました

代表的な画像最適化機能には以下のようなものがあります。

• Polish：必要に応じてフォーマットをWebP変換し最適化する
• Mirage：簡易なデバイスごとに画像を調整して必要に応じた表示
• Image Resizing：外部の画像を加工してキャッシュし配信する
• Cloudflare Images：画像をホスティングして加工してキャッシュし配信する

オリジナル画像

私のある日のランチ（カレー）の写真をサンプルとして画像最適化の効果を紹介します。

なおカレーのお店は秋葉原にあるニコニコまぜ麺&カレーさんです。ぜひ行ってみてください。

Polish と Mirage は手間がかからず導入できる

Polish と Mirage（Pro Plan 以上）を有効化するだけで、JPEG で 4624 × 3468 のカレーの画像（3.7 MB）が以下の様に最適化されます。

• PC ブラウザ
  • フォーマット：JPEG → WebP
  • ピクセル：4624x3468 → 4624x3468
  • データサイズ：3.7MB → 1.1MB
  • 配信元：US オレゴン州 → 日本 東京（キャッシュ）
  • 時間：1.35秒 → 117ミリ秒
• モバイル
  • フォーマット：JPEG → JPEG
  • ピクセル：4624x3468 → 1280x960
  • データサイズ：3.7MB → 198KB
  • 配信元：US オレゴン州 → 日本 東京（キャッシュ）
  • 時間：1.35秒 → 　77ミリ秒

動作のポイント

• Polish
  • 変換すると画質が低下したりサイズが大きくなる場合には WebP へ変換しない
• Mirage
  • スマホなどは、ディスプレイのピクセルサイズと論理的な画面サイズであるポイントは異なる
  • ポイントを意識した画像サイズへ移動変換する
  • 遅延ロードは JavaScript を自動で挿入するため、動作の確認が必要

Image Resizing は外部の画像を加工してキャッシュして配信する

Image Resizing（Pro Plan 以上の有償機能）は以下の形式の URL で画像を変換/キャッシュします。

https://<ZONE>/cdn-cgi/image/<OPTIONS>/<SOURCE-IMAGE>

回転

回転：90度、180度、270度に回転できる

/rotate=90/

切り取り

切り取り：上、右、下、左の順に切り取るサイズを設定する

/trim=1600;2500;0;900/

ぼかし

ぼかし：1(最小)から250(最大)

/blur=25/

全部

全部（回転＋切り取り＋ぼかし）

/rotate=90,trim=1600;2500;0;900,blur=25/

Cloudflare Image は画像をホスティングして加工してキャッシュして配信する

Cloudflare Images（Free Plan でも使える有償機能）は以下の形式の URL で画像を変換/キャッシュします。

https://imagedelivery.net/<ACCOUNT_HASH>/<IMAGE_ID>/<variant_name>

Images の通常設定

通常は以下の設定を組み合わせてバリアントを作成して設定する

• Resizing Options：画像の幅と高さ
• Fit：幅と高さの解釈
• Metadata：EXIF の扱い
• Blurring（オプション）：ぼかし度合い

Fit：Cover

Fit：Pad

Images のフレキシブル バリアント

フレキシブル バリアントを有効にすると URL の末尾に Image Resizing と同様のオプションを追加して動的な設定を行うことも出来ます。

https://imagedelivery.net/<ACCOUNT_HASH>/<IMAGE_ID>/<OPTIONS>

回転＋切り取り＋ぼかし

/rotate=90,trim=1600;2500;0;900,blur=25

まとめ

• Cloudflare の画像最適化機能は多彩にあるので、用途に合わせて活用をしましょう
• 簡易的な画像の最適化なら Polish や Mirage を使用して手間がかからず適用できます
• Image Resizing や Cloudflare Images を使用して、画像の加工と配信も可能です

さいごに

Serverless 文脈では Cloudflare は FaaS である Workers が話題になっています。しかしアプリケーションを構築するには画像の配信なども必要になります。今回は Cloudflare の画像最適化機能について紹介しました。Cloudflare では Workers や画像最適化機能だけでなく、様々な機能があるのでうまく活用していきましょう。